<template>
    <div class="c-choose">
        <div class="main-h" v-show="status == 2">
            您的得分: <span>{{reply.sum}}</span>分
        </div>
        <div class="main-content" v-if="$route.query.type == 1">
            <div class="main-title" v-show="status != 2">
                <div>选择题</div>
                <div>共40道题，每题1分</div>
            </div>
            <div class="main-item" v-for="(item,index) in menu.choose">
                <div class="main-item-title">
                    {{index + 1}}.{{item.title}}
                </div>
                <div class="main-item-content">
                    <div
                            v-for="(ite,ind) in item.select"
                            :class="{'item-active': ind === item.selected,
                            'item-success':reply.choose.length > 0 && reply.choose[index].answer == ind,
                            'item-error':reply.choose.length > 0 && ind === item.selected && ind != reply.choose[index].answer}"
                            v-if="ite != ''"
                            @click="chooseItem(index,ind,'choose')">{{ ind < 2
                                                                ? ind == 0
                                                                    ? 'A'
                                                                    : 'B'
                                                                : ind == 2
                                                                    ? 'C'
                                                                    : 'D'}}:{{ite}}</div>
                </div>
                <div class="awaser_t" v-if="reply.choose.length > 0">
                    正确答案：{{reply.choose[index].answer < 2
                    ? reply.choose[index].answer == 0
                    ? 'A'
                    : 'B'
                    : reply.choose[index].answer == 2
                    ? 'C'
                    : 'D'}}
                </div>
            </div>
            <div class="main-title" v-show="status != 2">
                <div>判断题</div>
                <div>共40道题，每题1分</div>
            </div>
            <div class="main-item" v-for="(item,index) in menu.judge">
                <div class="main-item-title">
                    {{index + 41}}.{{item.title}}
                </div>
                <div class="main-item-content">
                    <div
                            v-for="(ite,ind) in item.select"
                            :class="{'item-active': ind === item.selected,
                            'item-success':reply.judge.length > 0 && reply.judge[index].answer == ind,
                            'item-error':reply.judge.length > 0 && ind === item.selected && ind != reply.judge[index].answer}"
                            @click="chooseItem(index,ind)">{{ ind < 2
                        ? ind == 0
                        ? '对'
                        : '错'
                        : ind == 2
                        ? 'C'
                        : 'D'}}</div>
                </div>
                <div class="awaser_t" v-if="reply.judge.length > 0">
                    正确答案：{{reply.judge[index].answer < 2
                    ? reply.judge[index].answer == 0
                    ? '对'
                    : '错'
                    : reply.judge[index].answer == 2
                    ? 'C'
                    : 'D'}}
                </div>
            </div>
            <div class="main-title" v-show="status != 2">
                <div>填空题</div>
                <div>共20道题，每题2分</div>
            </div>
            <div class="main-item" v-for="(item,index) in menu.blank">
                <div class="main-item-title">
                    {{index + 81}}.{{item.name}}
                </div>
                <div class="main-item-content">
                    <textarea :class="{
                            'item-success':reply.blank.length > 0 && reply.blank[index].answer == item.selected,
                            'item-error':reply.blank.length > 0 && reply.blank[index].answer != item.selected}"
                              :disabled="status == 2"
                              v-model="item.selected"
                              placeholder="请填写你的答案,不要填入标点符号"></textarea>
                </div>
                <div class="awaser_t" v-if="reply.blank.length > 0">
                    正确答案：{{reply.blank[index].answer}}
                </div>
            </div>
            <div class="choose-button">
                <button class="vp-btn vp-btn-red" type="button" @click="over" v-if="$store.state.status != 2">交卷</button>
            </div>
        </div>
        <div class="main-content" v-if="$route.query.type == 2">
            <div class="main-title" v-show="status != 2 && msg.order == 0">
                <div>选择题</div>
                <div>共40道题，每题1分,当前第{{msg.num + 1}}题</div>
            </div>
            <div class="main-item" v-for="(item,index) in menu.choose" v-show="msg.order == 0 && index === msg.num">
                <div class="main-item-title">
                    {{index + 1}}.{{item.title}}
                </div>
                <div class="main-item-content">
                    <div
                            v-for="(ite,ind) in item.select"
                            :class="{'item-active': ind === item.selected,
                            'item-success':reply.choose.length > 0 && reply.choose[index].answer == ind,
                            'item-error':reply.choose.length > 0 && ind === item.selected && ind != reply.choose[index].answer}"
                            @click="chooseItem(index,ind,'choose')"
                            v-if="ite != ''">{{ ind < 2
                        ? ind == 0
                        ? 'A'
                        : 'B'
                        : ind == 2
                        ? 'C'
                        : 'D'}}:{{ite}}</div>
                </div>
                <div class="awaser_t" v-if="reply.choose.length > 0">
                    正确答案：{{reply.choose[index].answer < 2
                    ? reply.choose[index].answer == 0
                    ? 'A'
                    : 'B'
                    : reply.choose[index].answer == 2
                    ? 'C'
                    : 'D'}}
                </div>
            </div>
            <div class="main-title" v-show="status != 2 && msg.order == 1">
                <div>判断题</div>
                <div>共40道题，每题1分,当前第{{msg.num + 1}}题</div>
            </div>
            <div class="main-item" v-for="(item,index) in menu.judge" v-show="msg.order == 1 && index === msg.num">
                <div class="main-item-title">
                    {{index + 1}}.{{item.title}}
                </div>
                <div class="main-item-content">
                    <div
                            v-for="(ite,ind) in item.select"
                            :class="{'item-active': ind === item.selected,
                            'item-success':reply.judge.length > 0 && reply.judge[index].answer == ind,
                            'item-error':reply.judge.length > 0 && ind === item.selected && ind != reply.judge[index].answer}"
                            @click="chooseItem(index,ind)">{{ ind < 2
                        ? ind == 0
                        ? '对'
                        : '错'
                        : ind == 2
                        ? 'C'
                        : 'D'}}</div>
                </div>
                <div class="awaser_t" v-if="reply.judge.length > 0">
                    正确答案：{{reply.judge[index].answer < 2
                    ? reply.judge[index].answer == 0
                    ? '对'
                    : '错'
                    : reply.judge[index].answer == 2
                    ? 'C'
                    : 'D'}}
                </div>
            </div>
            <div class="main-title" v-show="status != 2 && msg.order == 2">
                <div>填空题</div>
                <div>共20道题，每题2分,当前第{{msg.num + 1}}题</div>
            </div>
            <div class="main-item" v-for="(item,index) in menu.blank" v-show="msg.order == 2 && index === msg.num">
                <div class="main-item-title">
                    {{index + 1}}.{{item.name}}
                </div>
                <div class="main-item-content">
                    <textarea :class="{
                            'item-success':reply.blank.length > 0 && reply.blank[index].answer == item.selected,
                            'item-error':reply.blank.length > 0 && reply.blank[index].answer != item.selected}"
                              :disabled="status == 2"
                              v-model="item.selected"
                              placeholder="请填写你的答案,不要填入标点符号"></textarea>
                </div>
                <div class="awaser_t" v-if="reply.blank.length > 0">
                    正确答案：{{reply.blank[index].answer}}
                </div>
            </div>
            <div class="choose-button">
                <button class="vp-btn vp-btn-red" type="button" @click="next">{{msg.count != 100 ? '确认并进入下一题' : '交卷'}}</button>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        name:'main',

        data() {
            return {
                menu:{ },

                type:this.$route.query.type,

                reply:{
                    choose:[],
                    blank:[],
                    judge:[]
                },

                msg:{
                    order:0,
                    num:0,
                    count:1,
                    now:{}
                }
            }
        },

        methods: {
            chooseItem(i,selected,type = 'judge') {
                if (this.status != 2) {
                    if (type == 'choose') {
                        this.menu.choose[i].selected = selected;
                    } else {
                        this.menu.judge[i].selected = selected;
                    }
                }
            },

            over() {
//                console.log(this.$route);
                if (this.$route.query.type == 2) {
                    this.$route.query.type = 1;
                }
                this.$store.dispatch('changeStatus',2);
            },

            next () {
                if (this.msg.count === 40 || this.msg.count === 80) {
                    this.msg.order +=1;
                    this.msg.num = 0;
                    this.msg.count+=1;
                    return;
                } else if (this.msg.count == 100) {
                    this.over();
                    return;
                }
                this.msg.num+=1;
                this.msg.count+=1;
            },

            update() {
                const that = this;
                let menu = {
                    choose:[],
                    judge:[],
                    blank:[]
                };
                for (let key in this.menu) {
                    this.menu[key].forEach(item => {
                        let obj = {
                            id: item.id,
                            selected: item.selected
                        };
                        menu[key].push(obj);
                    })
                }
                this.axios.post('get_score',menu)
                    .then(data => {
                        this.reply = data;
                        document.querySelector('.c-choose').scrollTop = 0;
                        that.axios.post('set_score', {
                            type:that.type == 2 ? 1 : 2,
                            score:data.sum,
                            id:localStorage.slug_id,
                            time:2700000 - that.$store.state.t
                        }).then(res => {
                            if (res.status == 200) {
                                that.$message.success('您的成绩已上传！');
                            }
                        })
                    })
            }
        },

        components:{

        },

        mounted() {
            // 判断有无权限
            if (this.$store.state.status === 0) {
                this.$message.error('无权访问该页面');
                this.$router.push('/topic/choose');
            }

            // 获取题目
            this.axios.get('get_topic', { params: {
                level:localStorage.level
            }}).then(data => {
                this.menu = data;
                delete this.menu.status;
//                console.log(this.menu);
                // 初始化题目
                this.menu.choose.forEach(item => {
                    this.$set(item, 'selected', '');
                });
                this.menu.judge.forEach(item => {
                    this.$set(item, 'selected', '');
                });
                this.menu.blank.forEach(item => {
                    this.$set(item, 'selected', '');
                });
                this.$loading.close();
            });
        },

        computed: {
            status () {
                return this.$store.state.status;
            }
        },

        watch: {
            'status' (val) {
                if (val === 2) {
                    if (this.$route.query.type == 2) {
                        this.update();
                        this.over();
                    } else {
                        this.update();
                    }
                }
            }
        }
    }
</script>

<style lang="less" scoped rel="stylesheet/less" type="text/css">
    @import "../../../plugins/assets/css/flex.less";
    @bred:#B12828;
    .c-choose {
        text-align: center;
        margin: 30px auto;
        max-height: 880px;
        overflow-y: auto;
        .main-h {
            font-size:28px;
            font-weight:bold;
            margin-bottom: 20px;
            span {
                color:@bred;
            }
        }
        .main-title {
            color:@bred;
            :first-child {
                font-size:26px;
                font-weight:bold;
                margin-bottom: 15px;
                /*margin-top:-50px;*/
            }
            :last-child {
                font-size: 14px;
                font-weight:bold;
            }
        }
        .main-content {
            margin: 10px auto;
            .main-item {
                margin-bottom:20px;
                &-title {
                    font-size:24px;
                    letter-spacing: 5px;
                    text-align: left;
                    line-height:32px;
                }
                &-content {
                    text-align: left;
                    margin-top:20px;
                    div {
                        border:2px solid transparent;
                        background: #FEFBF1;
                        font-size:18px;
                        margin-bottom:3px;
                        cursor: pointer;
                        padding: 15px 20px;
                    }
                    .item-active {
                        border:2px solid #B28850;
                    }
                    .item-success {
                        border:2px solid #98C831;
                    }
                    .item-error {
                        border:2px solid #EC414F;
                    }
                    textarea {
                        width:99%;
                        height:100px;
                        background: #FEFBF1;
                        text-indent:2em;
                        font-size:18px;
                        outline:none;
                        border:2px solid transparent;
                        font-family:@yh;
                    }
                }

                .awaser_t {
                    font-size:20px;
                    text-align: left;
                    margin:30px;
                }
            }
            .choose-button {
                .vp-btn {
                    margin-top: 40px;
                    padding: 10px 40px;
                    font-size:18px;
                    font-weight:bold;
                }
            }
        }
    }
    @media screen and (max-width: 768px) {
        .c-choose {
            text-align: center;
            margin: 10px auto;
            height:60vh;
            overflow: auto;
            .main-h {
                font-size:3vw;
                font-weight:bold;
                margin-bottom: 20px;
                span {
                    color:@bred;
                }
            }
            .main-title {
                color:@bred;
                :first-child {
                    font-size:3vw;
                    font-weight:bold;
                    margin-bottom: 15px;
                    margin-top:2vw;
                }
                :last-child {
                    font-size: 2vw;
                    font-weight:bold;
                }
            }
            .main-content {
                margin: 10px auto;
                .main-item {
                    margin-bottom:2vw;
                    &-title {
                        font-size:2vw;
                        letter-spacing: 3px;
                        text-align: left;
                        line-height:5vw;
                    }
                    &-content {
                        text-align: left;
                        margin-top:20px;
                        div {
                            border:2px solid transparent;
                            background: #FEFBF1;
                            font-size:2vw;
                            margin-bottom:3px;
                            cursor: pointer;
                            padding: 1vw 2vw;
                        }
                        .item-active {
                            border:2px solid #B28850;
                        }
                        .item-success {
                            border:2px solid #98C831;
                        }
                        .item-error {
                            border:2px solid #EC414F;
                        }
                        textarea {
                            width:95%;
                            height:10vw;
                            background: #FEFBF1;
                            text-indent:2em;
                            font-size:2vw;
                            outline:none;
                            border:0;
                            font-family:@yh;
                        }
                    }
                    .awaser_t {
                        font-size:3vw;
                        text-align: left;
                        margin:3vw;
                    }
                }
                .choose-button {
                    .vp-btn {
                        margin-top: 2vw;
                        padding: 1vw 3vw;
                        font-size:2vw;
                        font-weight:bold;
                    }
                }
            }
        }
    }
</style>